<template>
	<view class="content">
		<!-- 顶部内容 -->
		<view style="width: 100%; height: 80rpx; border: 1rpx seagreen solid;"></view>
		<!-- 主体内容 -->
		<view style="display: flex;">
			<!--左侧栏  -->
			  <scroll-view scroll-y="true" class="leftScroll">
			        <block v-for="(item, index) in category">
			          <view
			            @tap="scrollToRight(index)"
			            :class="{'selected': selectedIndex === index}"
			            style="height: 200rpx; border: 1rpx blueviolet solid;"
			          >
			            {{item.name}}
			          </view>
			        </block>
			      </scroll-view>
			<!--右侧栏  -->
			<scroll-view
			        scroll-y="true"
			        class="rightScroll"
			        :scroll-into-view="'commodity-' + selectedCommodityIndex"
			      >
			        <block v-for="(item, index) in commodity">
			          <view
			            :id="'commodity-' + index"
			            style="height: 300rpx; border: 1rpx blueviolet solid;"
			          >
			            {{item.name}}
			          </view>
			        </block>
			      </scroll-view>
		</view>
		<!-- 底部内容 -->
		<view></view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				category:[{"name":"测试数据1"},{"name":"测试数据2"},{"name":"测试数据3"},{"name":"测试数据4"},{"name":"测试数据5"}],
				commodity:[{"name":"对应数据1"},{"name":"对应数据2"},{"name":"对应数据3"},{"name":"对应数据4"},{"name":"对应数据5"}],
				selectedIndex: -1,
				selectedCommodityIndex: '-1',
			}
		},
		methods: {
			 scrollToRight(index) {
			      this.selectedIndex = index; // 设置选中的左侧测试数据项索引
			      this.selectedCommodityIndex = index; // 设置需要滚动到的右侧对应数据项的索引
			    }
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100vh;
		border: 1rpx blue solid;
	}
	
	
	.leftScroll{
		width: 100px;
		height: 500px;
		border: 1rpx red solid;
	}
	
	.rightScroll{
		flex: 1;
		height: 500px;
		border: 1rpx peru solid;
	}

</style>
